<template>
    <div class="pass-forget">
        <Header to='/personal/login' title="忘记密码"></Header>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
            <el-form-item label="手机号码" prop="tel" >
                <el-input class="pass-forget-phone" type="text" v-model.number="ruleForm.tel" placeholder="输入手机号">
                  </el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="verification">
                <el-input class="auth_input" type="text" v-model="ruleForm.verification" placeholder="输入验证码"/>
                <el-button
                  type="text"
                  :disabled="!sendAuthCode"
                  class="auth_text auth_text_blue"
                  @click="getAuthCode"
                >{{ sendAuthCode ? '获取验证码' : `${auth_time}秒之后重新发送验证码` }}</el-button>
            </el-form-item>
            <div class="click-button">
              <router-link :to='href'>
                <el-button type="primary" @click="makeSure()">确定</el-button>
              </router-link>
            </div>

        </el-form>
        <div class="feedback-error" v-if="this.appear">
          <span>{{message}}</span>
        </div>

    </div>
</template>

<script>
import Header from '../common/Header'
import axios from 'axios'
import qs from 'qs'
import { setLocalStorage } from '../../utils/localStorage'

export default {
  components: {
    Header
  },
  data () {
    const telCheck = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error('电话号码是必须的'))
      } else if (!Number.isInteger(value)) {
        return callback(new Error('电话号码必须是数字'))
      } else if (value.toString().length !== 11) {
        return callback(new Error('电话号码必须是11位数字'))
      } else {
        this.telJudge = true
        callback()
      }
    }
    const verificationCheck = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error('请输入验证码'))
      } else {
        callback()
      }
    }

    return {
      auth_time: 0,
      sendAuthCode: true,
      appear: false,
      message: '请输入电话号码',
      telJudge: false,
      verifyCode: '',
      href: '',
      ruleForm: {
        verification: '',
        tel: ''
      },
      rules: {
        verification: [
          { required: true, validator: verificationCheck, trigger: 'blur' }
        ],
        tel: [
          { required: true, validator: telCheck, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    getAuthCode: function () {
      if (!this.telJudge) {
        this.appear = true
        setTimeout(() => {
          this.appear = false
        }, 1000)
        return
      }
      let params = {}
      params.phone = this.ruleForm.tel
      axios.get('/sms?' + qs.stringify(params)).then(res => {
        console.log(res.data)
        if (res.data.code === 1) {
          this.verifyCode = res.data.data.verifyCode
        }
      }).catch((error) => {
        console.log(error)
      })
      this.sendAuthCode = false
      // 设置倒计时秒
      this.auth_time = 30
      var authTimeTimer = setInterval(() => {
        this.auth_time--
        if (this.auth_time <= 0) {
          this.sendAuthCode = true
          clearInterval(authTimeTimer)
        }
      }, 1000)
    },
    makeSure () {
      // if (!getLocalStorage('sessionId')) {
      //   this.$message({
      //     message: '您还未登录，请先登录',
      //     type: 'warning'
      //   })
      //   return
      // }
      if (this.ruleForm.verifyCode === '') {
        this.$message({
          message: '请输入验证码',
          type: 'warning'
        })
      } else if (this.ruleForm.verification === this.verifyCode && this.ruleForm.verifyCode !== '') {
        this.href = '/personal/login/pass-forget/reinstall-pass'
        setLocalStorage('userPhone', this.ruleForm.tel)
      } else {
        this.$message({
          message: '验证码不正确',
          type: 'warning'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../assets/styles/global';
.pass-forget {
    box-sizing: border-box;
    width: 100%;
    .el-form {
        padding: 0 20px;
        .el-form-item {
            margin-bottom: 22px;
            .auth_input {
                /* color:red; */
                border-radius: 8%;
                &:focus {
                    border: 1px solid #409EFF;
                }
            }
            .auth_text {
                &:active {
                    color: #fa5555;
                }
            }
            span {
              color: red;
              margin-left: 12px;
            }
        }
        .click-button {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    .feedback-error {
      background: #000;
      color: white;
      opacity: 0.4;
      width: 170px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      position: absolute;
      top: 250px;
      left: 110px;
  }

}
</style>
